<template>
  <div id="app">
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner">
        <div class="ring ring1"></div>
        <div class="ring ring2"></div>
        <div class="ring ring3"></div>
      </div>
      <p>资源加载中，请稍候...</p>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const isLoading = ref(true);

    // 模拟加载延迟
    setTimeout(() => {
      isLoading.value = false;
    }, 2000); // 2秒后加载完成

    return {
      isLoading,
    };
  },
});
</script>

<style scoped lang="less">
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  position: relative;
  width: 120px; /* 增大尺寸 */
  height: 120px; /* 增大尺寸 */
}

.ring {
  position: absolute;
  border: 8px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ring1 {
  border-top-color: #ff5733; /* 红色 */
  width: 120px; /* 增大尺寸 */
  height: 120px; /* 增大尺寸 */
  animation-delay: 0s;
}

.ring2 {
  border-top-color: #33c4ff; /* 蓝色 */
  width: 90px; /* 增大尺寸 */
  height: 90px; /* 增大尺寸 */
  top: 15px; /* 调整位置 */
  left: 15px; /* 调整位置 */
  animation-delay: 0.1s;
}

.ring3 {
  border-top-color: #75ff33; /* 绿色 */
  width: 60px; /* 增大尺寸 */
  height: 60px; /* 增大尺寸 */
  top: 30px; /* 调整位置 */
  left: 30px; /* 调整位置 */
  animation-delay: 0.2s;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
